<template>
  <div id="app">
    <transition mode="out-in">
      <router-view/>
    </transition>
    <van-tabbar v-model="active" active-color="#405f80" inactive-color="#666" route v-show="$route.meta.showFooter">
        <van-tabbar-item icon="newspaper-o" to="/read">阅读</van-tabbar-item>
        <van-tabbar-item icon="tv-o" to="/movie">电影</van-tabbar-item>
        <van-tabbar-item icon="music-o" to="/music">音乐</van-tabbar-item>
        <van-tabbar-item icon="user-circle-o" to="/profile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data(){
    return {
      active:0
    }
  }
}
</script>
<style lang="less">
  .v-enter,.v-leave-to{
    opacity: 0;
    transform: translateY(150px);
  }
  .v-enter-active,.v-leave-active{
    transition: all 0.5s ease;
  }
</style>
